<template>
<div class="base-form">
	<van-field
		v-model="formData.jzrks"
		label="1.总居住人数(人)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.zzrs"
		label="2.租住人数(人)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.cs"
		label="3.房屋层数(层)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.fjsl"
		label="4.房间数量(个)"
		type="digit"
		placeholder="请输入"
		required
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.jzfjs"
		label="5.出租房间数量(个)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.jzscxyaqcksl"
		label="6.房屋首层现有安全出口的数量(个)"
		placeholder="请输入"
		required
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.jzxyssltsl"
		label="7.房屋现有疏散楼梯的数量(个)"
		placeholder="请输入"
		required
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.jzscmj"
		label="8.房屋建筑面积(平方米)"
		placeholder="请输入"
		required
		type="number"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.ckfhwggptzlsl"
		label="9.窗口防护网、广告牌、铁栅栏数量(个)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.bdfwjzrydddzxcsl"
		label="10.本房屋居住人员的电动自行车数量"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.mhqsl"
		label="11.灭火器数量(个)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.fytsmz"
		label="12.防烟逃生面罩数量(套)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.xggdjsbp"
		label="13.悬挂固定警示标牌数量(张)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.jzsyjyplmhxts"
		label="14.房屋简易消防喷头数量(个)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.jzszlwxdlgybjqs"
		label="15.房屋烟感报警器数量(个)"
		placeholder="请输入"
		required
		type="digit"
		:rules="validator.number"
	/>
	<van-field
		v-model="formData.wdwhjgfjgqsyyrkrgbdj"
		label="16.屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建"
		placeholder="请选择"
		required
		:rules="validator.boolean"
	>
		<template #input>
			<van-radio-group v-model="formData.wdwhjgfjgqsyyrkrgbdj" direction="horizontal">
				<van-radio
					v-for="item in echoData.boolean"
					:name="item.value"
					:key="item.value"
				>
					{{ item.label }}
				</van-radio>
			</van-radio-group>
		</template>
	</van-field>
	<van-field
		v-model="formData.sstdsyyrkrclzx"
		label="17.疏散通道使用易燃可燃材料装修"
		placeholder="请选择"
		required
		:rules="validator.boolean"
	>
		<template #input>
			<van-radio-group v-model="formData.sstdsyyrkrclzx" direction="horizontal">
				<van-radio
					v-for="item in echoData.boolean"
					:name="item.value"
					:key="item.value"
				>
					{{ item.label }}
				</van-radio>
			</van-radio-group>
		</template>
	</van-field>
	<van-field
		v-model="formData.gryssdcsszblyyqksddp"
		label="18.供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚、雨棚等"
		placeholder="请选择"
		required
		:rules="validator.boolean"
	>
		<template #input>
			<van-radio-group v-model="formData.gryssdcsszblyyqksddp" direction="horizontal">
				<van-radio
					v-for="item in echoData.boolean"
					:name="item.value"
					:key="item.value"
				>
					{{ item.label }}
				</van-radio>
			</van-radio-group>
		</template>
	</van-field>
	<van-field
		v-model="formData.cjzwqtjyyt"
		label="19.除居住外是否存在其他经营业态"
		placeholder="请选择"
		:rules="validator.boolean"
	>
		<template #input>
			<van-radio-group v-model="formData.cjzwqtjyyt" direction="horizontal">
				<van-radio
					v-for="item in echoData.boolean"
					:name="item.value"
					:key="item.value"
				>
					{{ item.label }}
				</van-radio>
			</van-radio-group>
		</template>
	</van-field>
	<van-field
		v-if="+formData.cjzwqtjyyt === 1"
		class="field-column"
		placeholder="请选择"
		:rules="validator.business"
	>
		<template #input>
			<van-checkbox-group v-model="formData.cjzwqtjyytmsg" direction="horizontal">
				<van-checkbox
					v-for="item in echoData.business"
					:name="item"
					:key="item"
					shape="square"
				>
					{{ item }}
				</van-checkbox>
			</van-checkbox-group>
		</template>
	</van-field>
	<van-field
		class="field-column field-no-border"
		label="20.建设人员疏散通道"
		placeholder="请选择"
		required
		:rules="validator.boolean"
	>
		<template #input>
			<van-radio-group v-model="formData.jsrysstd" direction="horizontal" @click="onBuildClick">
				<van-radio
					v-for="item in echoData.exit"
					:name="item.value"
					:key="item.value"
				>
					{{ item.label }}
				</van-radio>
			</van-radio-group>
		</template>
	</van-field>
	<van-field
		v-if="formData.jsrysstd === '已完成'"
		class="field-column"
		placeholder="请选择"
		required
		:rules="validator.boolean"
	>
		<template #input>
			<van-checkbox-group v-model="formData.sstdjsqk">
				<van-checkbox
					v-for="item in echoData.status1"
					:name="item"
					:key="item"
					shape="square"
				>
					{{ item }}
				</van-checkbox>
			</van-checkbox-group>
		</template>
	</van-field>
	<van-field
		v-if="formData.jsrysstd === '未完成'"
		class="field-column"
		placeholder="请选择"
		required
		:rules="validator.boolean"
	>
		<template #input>
			<van-radio-group v-model="formData.sstdjsqk">
				<van-radio
					v-for="item in echoData.status2"
					:name="item"
					:key="item"
				>
					{{ item }}
				</van-radio>
			</van-radio-group>
		</template>
	</van-field>
</div>
</template>

<script setup>
import { reactive, defineProps, watch } from 'vue'

const props = defineProps({
	formData: {
		type: Object,
		default: () => {}
	},
})

const validateNumber = (val) =>
	new Promise((resolve) => {
		if (val && val >= 0) {
			resolve(true)
		} else {
			resolve(false)
		}
	})

const echoData = reactive({
	business: [
		'餐饮',
		'商店',
		'美容美发',
		'KTV',
		'网吧',
		'美甲美睫',
		'棋牌室',
		'茶社',
		'足疗、按摩',
		'教学培训',
		'医疗诊所',
		'加工生产',
		'其它',
	],
	boolean: [
		{ label: '是', value: '1' },
		{ label: '否', value: '0' }
	],
	exit: [
		{ label: '已完成', value: '已完成' },
		{ label: '未完成', value: '未完成' }
	],
	status1: [
		'建筑室内增设疏散楼梯',
		'建筑室外或内天井增设疏散楼梯',
		'利用相邻或相近建筑疏散',
	],
	status2: [
		'正在制定方案',
		'正在施工改造',
	]
})
const validator = {
	number: [
		{ required: true, message: '请输入' },
		{ validator: validateNumber, message: '请输入正数' }
	],
	business: [{ required: true, message: '请选择' }],
	boolean: [{ required: true, message: '请选择' }],
}

const onBuildClick = () => {
	props.formData.sstdjsqk =
		props.formData.jsrysstd	=== '已完成' ? [] : ''
}

</script>

<style scoped lang="less">
.base-form {
}
</style>
